<template>
    <div>
        <Pane>
            <template #title>修改密码</template>
            <form action="a.php" method="post" enctype="application/x-www-form-urlencoded"></form>
            <template #content>
                <el-form 
                 :model="account" 
                 status-icon 
                 :rules="rules"
                 ref="accAddForm" 
                 label-width="100px" 
                 class="demo-ruleForm"
                >
                    <el-form-item label="原密码" prop="pwd">
                        <el-input v-model.trim="account.pwd"></el-input>
                    </el-form-item>

                    <el-form-item label="新密码" prop="new_pwd">
                        <el-input type="password" v-model="account.new_pwd" autocomplete="off"></el-input>
                    </el-form-item>
                   
                     <el-form-item label="确认新密码" prop="repeat_new_pwd">
                        <el-input type="password" v-model="account.repeat_new_pwd" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- {{account}} -->
            </template>      
        </Pane>
    </div>
</template>

<script>
    import Pane from '@/components/Pane/Pane';
    import {ACC_REG,PWD_REG} from "@/utils/reg"

    export default {
        components:{
            Pane
        },
        data(){
            // 自定义验证函数（注意定义的位置）:账号
            /*
            rule: 是一个对象，不用
            val:  就是用户输入的值
            callback: 是一个回调函数
                如果错误：  callback(new Error("错误信息"))
                如果正确：  callback()
            */
           let checkAcc = (rule,val,callback)=>{
               //做验证，完了后，调用callback()
               /* if(val.length >=3 && val.length<=6){
                   callback();//成功
               }else{
                  callback('用户名长度在3-6之间');//成功
               } */
               if(!val){
                   callback(new Error("用户名不能为空"));
               }else if(ACC_REG.test(val)){
                   callback();
               }else{
                   callback(new Error('用户名长度在3-6之间'));
               }
           }

            // 自定义验证密码
            const checkPwd = (rule, val, callback) => {
                if (!val) {
                    callback("请输入密码"); // 非空 错误提示
                } else if (!PWD_REG.test(val)) {
                    callback(new Error("3到12位（字母、数字、下划线）"));
                } else {
                    callback(); // 成功
                }
            };

            // 自定义验证 确认新密码
            const checkConfirmPwd = (rule, val, callback) => {
                if (!val) {
                    callback(new Error("请再次输入新密码")); // 非空
                    // this.$message.error("请再次输入新密码")//提示用户
                } else if (val !== this.account.repeat_new_wd) {
                    callback(new Error("两次密码不一致"));
                } else {
                    callback();
                }
            };

           return {
                //表单数据对象
                account:{
                    pwd:"",
                    new_pwd:"",
                    repeat_new_pwd:""
                },
                //验证规则对象
                rules:{
                  //内置
                   /*  pwd:[
                        {required:true,message:"请输入账号",trigger:"blur"},
                        {min:3,max:10,message:"长度在3-10之间",trigger:"blur"}
                    ],
                    new_pwd:[
                        {required:true,message:"请输密码",trigger:"blur"},
                        {min:6,max:10,message:"长度在6-10之间",trigger:"blur"}
                    ],
                    repeat_new_pwd:[
                        {required:true,message:"请输入确认密码",trigger:"change"}
                    ] */
                   //自定义，就是内置验证基础上 指定 自定义的验证函数,删除message属性
                    pwd:[
                        {required:true,trigger:"blur",validator: checkAcc}
                    ],
                    new_pwd:[
                        {required:true,trigger:"blur",validator: checkPwd}
                    ],
                    repeat_new_pwd:[
                        {required:true,trigger:"blur",validator: checkConfirmPwd}
                    ] 
                }
           }
        },
        methods:{
            submitForm(){
                // console.log(this.account)
                // 触发整个表单的验证(validate 检测表单是否验证通过：true/false))
                this.$refs.accAddForm.validate((valid)=>{
                    console.log(valid)
                    if(valid){
                        //做。。。
                        console.log("ok")
                    } else{
                        console.log("error")
                    }
                });
            },
            resetForm(){
                this.$refs.accAddForm.resetFields();
            }
        }
    }
</script>

<style lang="less" scoped>

</style>